<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-24 16:02:39
-->
<template>
    <div class="album-list" v-if="AlbumList.length !== 0">
        <ul>
            <li v-for="(item, index) in AlbumList" :key="item.id" @click="ClickItem(item)">
                <div class="img">
                    <img v-lazy="item.picUrl" alt="">
                </div>
                <div class="info">
                    <span>{{ item.name }}</span>
                    <span class="artist">{{ item.artists[0].name }}</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
defineProps({
    AlbumList: {
        type: Array,
        default: []
    }
})

//拉到底部时再次获取数据
// function getData(){

// }

function ClickItem(item) {
    router.push({
        name: 'Albumdetail',
        params: {
            id: item.id
        }
    })
}

</script>

<style lang="scss" scoped>
.album-list {
    ul {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;

        li {
            cursor: pointer;
            height: 230px;
            width: 180px;
            margin-right: 60px;
            margin-bottom: 20px;

            .img {
                position: relative;
                height: 170px;
                width: 100%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .info {
                margin-top: 10px;
                display: flex;
                flex-direction: column;

                span {
                    height: 35px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .artist {
                    color: #999999;
                    font-size: 10px;
                }
            }
        }
    }
}

// .mask-playicon {
//     height: 170px;
//     background: none;
// }
// .icon-shipinbofangshibofang {
//     height: 35px;
//     width: 35px;
//     line-height: 35px;
// }
</style>